<!DOCTYPE html>
<html>
<head>
    <title>Frequency Spectrum Plot</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define plot parameters
        const originX = 100;
        const originY = 320;
        const plotWidth = 350;
        const plotHeight = 280;

        // --- Clear canvas ---
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Set drawing styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '18px Arial';

        // --- Draw Axes ---
        ctx.beginPath();
        // X-axis (frequency)
        ctx.moveTo(originX - 20, originY);
        ctx.lineTo(originX + plotWidth, originY);
        // Y-axis (amplitude)
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - plotHeight);
        // Arrowhead for Y-axis
        ctx.moveTo(originX, originY - plotHeight);
        ctx.lineTo(originX - 6, originY - plotHeight + 12);
        ctx.moveTo(originX, originY - plotHeight);
        ctx.lineTo(originX + 6, originY - plotHeight + 12);
        ctx.stroke();

        // --- Draw Spikes and Ticks ---
        const x_225 = originX + 85;
        const x_240 = originX + 160;
        const x_255 = originX + 235;

        const h_sideband = 100;
        const h_carrier = 220;
        const tickHeight = 6;

        ctx.beginPath();
        // Spike and tick at 225 kHz
        ctx.moveTo(x_225, originY);
        ctx.lineTo(x_225, originY - h_sideband);
        ctx.moveTo(x_225, originY);
        ctx.lineTo(x_225, originY + tickHeight);

        // Spike and tick at 240 kHz
        ctx.moveTo(x_240, originY);
        ctx.lineTo(x_240, originY - h_carrier);
        ctx.moveTo(x_240, originY);
        ctx.lineTo(x_240, originY + tickHeight);

        // Spike and tick at 255 kHz
        ctx.moveTo(x_255, originY);
        ctx.lineTo(x_255, originY - h_sideband);
        ctx.moveTo(x_255, originY);
        ctx.lineTo(x_255, originY + tickHeight);
        ctx.stroke();


        // --- Draw Labels ---
        // Y-axis label
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('amplitude', 20, 150);

        // X-axis label
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('frequency / kHz', originX + plotWidth/2, originY + 25);

        // Figure caption
        ctx.fillText('Fig. 4.1', canvas.width / 2, originY + 60);

        // Number labels on axes
        // Origin label "0"
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('0', originX - 8, originY);

        // Frequency labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('225', x_225, originY + tickHeight + 4);
        ctx.fillText('240', x_240, originY + tickHeight + 4);
        ctx.fillText('255', x_255, originY + tickHeight + 4);

    </script>
</body>
</html>